<template>
  <div class="content">
    <div class="report" id="report" v-loading="showLoading">
      <div class="header">
        <div class="title">
          {{ statisticsInfo.name }}
        </div>
      </div>
      <el-button type="warning" size="large" class="noprint" v-show="flag" id="pdf" @click="triggerPrint">
        打印
      </el-button>
      <div v-show="false" ref="printBtn" v-print="printObj"></div>
      <el-table
        :data="statisticsList"
        border
        row-key="rowId"
        :expand-row-keys="expandRows"
        :header-cell-style="{ background: '#F5F7FA' }"
      >
        <el-table-column prop="indexName">
          <template #header>
            <div style="text-align: center">指标</div>
          </template>
        </el-table-column>
        <TableColumn v-for="item in headerTree" :key="item.id" :column="item" :isShow="true" />
      </el-table>
      <div class="header">
        <div class="title">热力分布</div>
      </div>
      <el-row style="padding: 0 20px">
        <el-col :span="12">
          <el-form-item label="指标" label-width="120px">
            <el-tree-select
              v-model="formData.index"
              :data="statisticsList"
              :props="{ label: 'indexName', disabled: 'disabled' }"
              check-strictly
              node-key="rowId"
              show-checkbox
              :render-after-expand="false"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维度" label-width="120px">
            <el-tree-select
              ref="treeSelectRef"
              v-model="formData.column"
              :data="headerTree"
              :props="{ label: 'indexName', disabled: 'disabled' }"
              check-strictly
              node-key="id"
              show-checkbox
              :render-after-expand="false"
              clearable
              @check-change="columnCheckChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="chart" ref="chartRef"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { getStatisticsReport, getStatisticsInfo } from '@/api/statistics'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, watch } from 'vue'
import TableColumn from './tableColumn.vue'
import { bottom } from '@antv/x6/lib/registry/port-layout/main'
const printObj = ref({
  id: 'report',
  popTitle: '',
  scanStyles: false,
  targetStyles: ['*']
})
const flag = ref(true)
const printBtn = ref(null)
const treeSelectRef = ref(null)
const chartRef = ref(null)
const route = useRoute()
const showLoading = ref(false)
const statisticsList = ref([])
const headerTree = ref([])
const expandRows = ref([])
const statisticsInfo = ref({})
const resultInfo = ref({})
const formData = reactive({
  index: '',
  column: ''
})
onMounted(() => {
  statisticsList.value = []
  expandRows.value = []
  headerTree.value = []
  showLoading.value = true
  getStatisticsReport(route.query.id)
    .then((res) => {
      resultInfo.value = res.data
      statisticsList.value = setDisabled(res.data.tree)
      console.log(statisticsList.value)
      expandRows.value = res.data.tree.map((item) => item.rowId)
      getStatisticsInfo(route.query.id).then((res) => {
        headerTree.value = res.data.headerTree
        statisticsInfo.value = res.data
        formData.index = statisticsList.value[0].rowId
        formData.column = getFristId(headerTree.value)
        setChart()
      })
    })
    .finally(() => {
      showLoading.value = false
    })
})
const setDisabled = (list) => {
  const newList = []
  list.forEach((item) => {
    const p = { ...item }
    if (p.children && p.children.length > 0) {
      p.disabled = false
      p.children = setDisabled(p.children)
    } else {
      p.disabled = true
    }
    newList.push({ ...p })
  })
  return newList
}
const columnCheckChange = (data, checked) => {
  console.log(data, checked)
  if (data.children && data.children.length > 0 && checked) {
    ElMessage.error('请选择子节点')
    treeSelectRef.value.setCheckedKeys([])
  }
}
watch(
  () => formData,
  () => {
    if (formData.index && formData.column) {
      setChart()
    }
  },
  { deep: true }
)
const setChart = () => {
  console.log(formData)
  chartRef.value.style.height = resultInfo.value.heatmapRank.areaNames.length * 30 + 100 + 'px'
  const data = resultInfo.value.heatmapRank.data[formData.column][formData.index].map(function (item) {
    return [item[1], item[0], item[2] || '-']
  })
  console.log(data.map((item) => item[2]))
  const max = data.map((item) => item[2]).reduce(getmax)
  console.log(max)

  const chart = echarts.init(chartRef.value)

  const option = {
    tooltip: {
      position: 'top'
    },
    grid: {
      top: '5%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: resultInfo.value.heatmapRank.rankName[formData.index],
      splitArea: {
        show: true
      },
      axisLabel: {
        rotate: -20
      }
    },
    yAxis: {
      type: 'category',
      data: resultInfo.value.heatmapRank.areaNames,
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: 0,
      max: max,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '0%',
      color: ['#67C23A', '#fff', '#F56C6C']
    },
    series: [
      {
        type: 'heatmap',
        data: data,
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option, true)
  function getmax(prev, next) {
    return Math.max(prev, next)
  }
}
const getFristId = (tree) => {
  let id = ''
  if (tree[0] && tree[0].children && tree[0].children.length) {
    id = getFristId(tree[0].children)
  } else {
    id = tree[0].id
  }
  return id
}
const triggerPrint = () => {
  var p = new Promise((resolve, rejected) => {
    flag.value = false
    // this.loading = false
    nextTick(() => {
      console.log(printBtn.value)
      printBtn.value.click()
      resolve(true)
    })
  })
  p.then(() => {
    console.log(22)
    flag.value = true
  })
}
</script>

<style lang="scss" scoped>
.header {
  // background: url('@/assets/image/xj_bck.png') no-repeat;
  // width: 1450px;
  // height: 2058px;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // box-sizing: border-box;
  // padding: 120px 0px 0px 53px;
  // position: relative;
}
.report {
  position: relative;
  width: 1450px;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  // border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .title {
    padding: 20px;
    text-align: center;
    font-size: 25px;
    font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
    font-weight: bold;
    color: #2e2e2e;
    box-sizing: border-box;
    line-height: 106px;
  }
}
.noprint {
  position: absolute;
  top: 50px;
  right: 50px;
  width: 100px;
}
.chart {
  width: 100%;
  height: 400px;
}
</style>
